<template>
<!-- 	<view class="content"  style="min-height: 100vh">
		<image class="bg" src="/static/login/log_bg.png" mode="scaleToFill"></image> -->
		<view class="content" :style="{'background':kbackgroundColor}" style="min-height: 100vh">
		
		<hx-navbar title="切换主题" :back="true" :fixed="false" :color="knavTitleColor" barPlaceholder="hidden"
			transparent="auto"></hx-navbar>
		<view class="list_contentView">
		  <view
		    v-for="(item, index) in list" :style="selStyle"
		    class="item " :class="item.name=='紫色浪漫'?'back_qh':'back_qh_black'"
		    @click="change(item, index)"
		  >
		    <view class="item-content">
		      <view class="item_name" :style="{'color':knavTitleColor}">{{ item.name }}</view>
		      <view v-if="currentTheme == item.key"  :class="ktheme == 'black'?'item_number_yellow':'item_number'"
		        >当前使用</view
		      >
		    </view>
		  </view>
		</view>
	</view>
  
</template>

<script>
	export default {
		data() {
			return {
					selStyle: {
									'--paybackground': this.$store.state.paybackground,
									},
				currentTheme: 'purple',
				list: [
				  {
				    name: '紫色浪漫',
				    key: 'purple',
				  },
				  {
				    name: '酷炫雅黑',
				    key: 'black',
				  }
				],
			}
		},
		computed: {
		},
		onLoad() {
			const value = uni.getStorageSync('theme');
			this.currentTheme = value
		},
		methods: {
			change(item, index) {
				//将选中的模式存储缓存
				const value = item.key 
				this.currentTheme = value
				//uni.getStorageSync('theme');
				if (value == 'purple') {
					uni.setStorageSync('theme', "purple");
				} else if (value == 'black') {
					uni.setStorageSync('theme', "black");
				} else {
					uni.setStorageSync('theme', "black");
				}
				// this.setTheme(uni.getStorageSync('theme'));
				//用于动态的改变定义在vuex当中的变量，达到动态换肤的效果
				this.$store.dispatch('changeTheme', uni.getStorageSync('theme'));
				uni.reLaunch({
					url:'/pages/index/index'
				})
			},
			
		},
	}
</script>

<style lang="scss">
page {
  background: #f7f7f7;
}
.list_contentView {
  display: flex;
  flex-direction: column;
  padding: 0 40rpx;
  position: relative;
  z-index: 2;
  .notice {
    font-size: 24rpx;
    font-weight: bold;
    color: red;
    padding: 20rpx;
  }
  .back_qh{
	  background: url('/static/user/back_qh.png') no-repeat 90% 90%;
	  width: 100%;
	  height: 100%;
  }
  .back_qh_black{
	  background:var(--paybackground);// #222222
  }

  .item {
    display: flex;
    flex-direction: column;
    padding: 30rpx;
    margin: 16rpx 0;
    // background: white;
    border-radius: 20rpx;  position: relative;
    .item-content {
      display: flex;
      flex-direction: row;
	
      .item_name {
        display: flex;
        margin-left: 20rpx;
        color: #333333;
        font-size: 28rpx;
        font-weight: bold;
		
      }
      .item_number {
       color: #000000;
              font-size: 24rpx;
                 // margin-right: -15px;
                 // margin-left: auto;
      		   right: 0;
      		   top: 0;
                 // margin-top: -14px;
      		   position: absolute;
      	background: linear-gradient(90deg, #C4A0FF, #deb4ff);
      	border-radius: 0rpx 10rpx 0rpx 20rpx;
      		padding: 10rpx 18rpx;
      } 

	  .item_number_yellow {
        color: #000000;
        font-size: 24rpx;
           // margin-right: -15px;
           // margin-left: auto;
		   right: 0;
		   top: 0;
           // margin-top: -14px;
		   position: absolute;
	background: linear-gradient(90deg, #ECC58B, #FFECC4);
	border-radius: 0rpx 10rpx 0rpx 20rpx;
		padding: 10rpx 18rpx;
      }
    }
    .item-url {
      display: flex;
      margin-top: 10rpx;
      margin-left: 20rpx;
      color: #333333;
      font-size: 24rpx;
    }
  }
}

</style>
